<template>
  <view class="layout-component">
    <view class="item-layout bg"> </view>
    <view class="item-layout bg"></view>
    <view class="item-layout bg"></view>
  </view>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";

export default defineComponent({
  name: "",
  props: {},
  components: {},
  setup() {
    const data = reactive({});
    return {
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="less">
.layout-component {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  //   grid-template-rows: repeat(2, 100rpx);
  column-gap: 10rpx;
  row-gap: 10rpx;
  .item-layout {
    height: 360rpx;
  }
  .bg {
    background-color: #c2ffc7;
    border-radius: 10rpx;
  }
}
</style>
